<template>
    <!-- 头部 搜索、新增 区域 -->
    <el-row :gutter="20" class="header">
        <el-col :span="6">
            <el-input v-model="search" placeholder="请输入工单备注信息" clearable>
                <template #append>
                    <el-button @click="getEmployeeWorkOrder()"> 搜索 </el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>

    <!-- 华丽的分割线 -->
    <el-divider />

    <!-- 表格形式展示workOrder数据 -->
    <div>
        <el-table :data="workOrderData" style="width: 100%">
            <el-table-column prop="id" label="工单编号" width="175" v-if="false" />
            <el-table-column prop="blockName" label="所属区块" width="150" v-if="false" />
            <el-table-column prop="houseName" label="所属房室" width="100" v-if="false" />、
            <el-table-column prop="reportAddress" label="报事地址" width="180" />
            <el-table-column prop="orderTime" label="下单时间" width="105" sortable/>
            <el-table-column prop="submitterName" label="报事人" width="80" />
            <el-table-column prop="completeStatus" label="工单状态" width="100">
                <template #default="{ row }">
                    <el-button v-if="row.completeStatus == '1'" @click="showProcess(row.id)" type="primary"
                        plain>待接收</el-button>
                    <el-button v-if="row.completeStatus == '2'" @click="showProcess(row.id)" type="warning"
                        plain>处理中</el-button>
                    <el-button v-if="row.completeStatus == '3'" @click="showProcess(row.id)" type="success"
                        plain>已完成</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="工单类别" width="100">
                <template #default="{ row }">
                    <el-tag size="large" effect="dark">{{ row.categoryName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="orderRemark" label="工单备注" width="300" />
            <el-table-column prop="closeStatus" label="关单状态" width="90">
                <template #default="{ row }">
                    <el-tag v-if="row.closeStatus == '0'" type="success">未关闭</el-tag>
                    <el-tag v-if="row.closeStatus == '1'" type="info">已关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="处理节点" width="150">
                <template #="rs">
                    <el-button v-if="rs.row.completeStatus == 2 && rs.row.closeStatus == 0" @click="handle(rs.row.id)"
                        type="primary" size="small">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 底部分页器 -->
    <div v-if="total > 0">
        <div class="page-box">
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :disabled="false" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getEmployeeWorkOrder"
                    @current-change="getEmployeeWorkOrder" />
            </div>
        </div>
    </div>

    <!-- 处理工单弹窗 -->
    <el-dialog v-model="handleWorkOrderDialog" title="处理工单" width="55%">

        <el-table :data="currentHandleWorkOrder" style="width: 100%">
            <el-table-column prop="statusName" label="节点名称" width="80">
                <template #default="{ row }">
                    <el-tag effect="plain">{{ row.statusName }}</el-tag>
                </template>
            </el-table-column>>
            <el-table-column prop="startTime" label="处理时间" width="100" />
            <el-table-column prop="handler" label="处理人" width="80" />
            <el-table-column prop="remark" label="处理备注" width="380" />
            <el-table-column prop="completeStatus" label="处理状态" width="80">
                <template #default="{ row }">
                    <el-tag v-if="row.completeStatus == '0'" type="warning" plain>未完成</el-tag>
                    <el-tag v-if="row.completeStatus == '1'" type="success" plain>已完成</el-tag>
                </template>
            </el-table-column>
        </el-table><br />

        <el-form v-if="handleFlag">
            <el-form-item label="备注信息">
                <el-input v-model="inputHandleRemark" type="textarea" placeholder="请输入首个未处理节点的处理备注信息">
                </el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer" v-if="handleFlag">
                <el-button @click="handleWorkOrderDialog = false">取消</el-button>
                <el-button type="primary" @click="handleWorkOrder()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>



<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

import { useUserInfoStore } from '@/stores/userInfo.js';
const userInfoStore = useUserInfoStore();
const userInfo = userInfoStore.userInfo;

import { workordeGetProcessInfoService } from '@/api/workorder.js'
import { employeeGetWorkorderService, employeeHandleWorkorderService } from '@/api/user.js'


// 初始化参数
// 按工单备注模糊搜索、分页
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const handleWorkOrderDialog = ref(false)    // 处理工单的弹出框
const workOrderData = ref([])   // 当前员工的工单数据
const inputHandleRemark = ref()    // 输入处理备注
const currentHandleWorkOrderId = ref('')    // 当前处理工单的工单id
const currentHandleWorkOrder = ref([])    // 当前处理工单的工单
const handleFlag = ref(false)

// 点击处理按钮时触发
const handle = function (workOrderId) {
    currentHandleWorkOrderId.value = workOrderId
    getProcessInfo() // 获取当前工单的处理信息
    handleFlag.value = true
    handleWorkOrderDialog.value = true  // 打开处理工单节点的弹窗
}

// 格式化工单流程数据
const formatWorkOrderData = () => {
    currentHandleWorkOrder.value.forEach(item => {
        if (item.startTime == 0) {
            item.startTime = '/'
            item.handler = '/'
            item.remark = '/'
        }
        else {
            // 将时间戳转换为常见时间格式
            item.startTime = new Date(item.startTime).toLocaleString()
        }
    })
}

const showProcess = function (workOrderId) {
    currentHandleWorkOrderId.value = workOrderId
    getProcessInfo() // 获取当前工单的处理信息
    handleFlag.value = false
    handleWorkOrderDialog.value = true  // 打开处理工单节点的弹窗
}

async function getProcessInfo() {
    try {
        let result = await workordeGetProcessInfoService(currentHandleWorkOrderId.value)
        if (result.code == 200) {
            currentHandleWorkOrder.value = result.data;
            formatWorkOrderData()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (getProcessInfo)')
    }
}

async function getEmployeeWorkOrder() {
    try {
        let result = await employeeGetWorkorderService(userInfo.id, search.value, currentPage.value, pageSize.value)
        if (result.code == 200) {
            workOrderData.value = result.data.list;
            total.value = result.data.total;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else if (result.code == 500) {
            ElMessage.warning(result.msg)
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (getEmployeeWorkOrder)')
    }
}

async function handleWorkOrder() {
    try {
        let result = await employeeHandleWorkorderService(userInfo.id, currentHandleWorkOrderId.value, inputHandleRemark.value)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            handleWorkOrderDialog.value = false
            getEmployeeWorkOrder()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (handleWorkOrder)')
    }
}

getEmployeeWorkOrder();

</script>

<style>
.header {
    margin-bottom: 7px;
}
</style>